<template>
  <el-dialog
    title="操作日志"
    v-loading="logLoading"
    :visible.sync="dialogVisible"
    width="90%"
    :show="show"
    :close-on-click-modal="false"
    :close-on-press-escape="false"
    @open='open'
    @close="$emit('update:show',false)"
  >
    <el-scrollbar :wrap-class="{wrapClass: true}">
      <el-table
        v-loading="logLoading"
        :data="list"
        element-loading-text="Loading"
        fit
        border
        size="medium"
        style="margin-bottom: 20px"
        :height="listQuery.total>0 ? 'calc(100vh - 300px)' : 'calc(100vh - 250px)'"
        :header-cell-style="{background: '#F2F6FC'}"
      >
        <el-table-column align="center" fixed="left" label="序号" width="50" type="index">
        </el-table-column>
        <el-table-column label="详情" fixed="left" min-width="110px">
          <template slot-scope="scope">
            <strong>{{scope.row.remark}}</strong>
          </template>
        </el-table-column>
        <el-table-column label="操作用户" min-width="110px">
          <template slot-scope="scope">
            {{ scope.row.operateTrueName }}
          </template>
        </el-table-column>
        <el-table-column label="操作IP" min-width="110px">
          <template slot-scope="scope">
            {{ scope.row.operateIp }}
          </template>
        </el-table-column>
        <el-table-column label="操作时间" width="155px" align="center">
          <template slot-scope="scope">
            {{scope.row.createdAt}}
          </template>
        </el-table-column>
      </el-table>
      <pagination
        style="margin-bottom: 15px;"
        v-show="listQuery.total>0"
        :total="listQuery.total"
        :page.sync="listQuery.page"
        :limit.sync="listQuery.limit"
        @pagination="open"
      />
    </el-scrollbar>
  </el-dialog>
</template>
<style scoped>
/deep/ .el-dialog {
  margin-top: 10vh !important;
  min-width: 500px;
}
</style>
<script>
import Pagination from '@/components/Pagination'
import { getAction } from '@/api/common'

export default {
  name: 'userLog',
  props: {
    show: {
      type: Boolean,
      default: false
    },
    // eslint-disable-next-line vue/require-prop-type-constructor
    id: ''
  },
  data() {
    return {
      list: null,
      listQuery: {
        page: 1,
        total: 0,
        id: ''
      },
      dialogVisible: this.show,
      logLoading: true
    }
  },
  components: {
    Pagination
  },
  methods: {
    async open() {
      this.logLoading = true
      this.listQuery.id = this.id
      const { data } = await getAction(this.listQuery, 'UserCompany/GetUserLogList')
      this.list = data.items
      this.listQuery.total = data.total

      this.logLoading = false
    }
  },
  watch: {
    show() {
      this.dialogVisible = this.show
    }
  }
}
</script>
